<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }

        .box{
            width: 1000px;
            margin:50px auto;

        }
        .box .tab{
            width: 400px;
            height: 44px;
            border:1px solid #ccc;
            /*设置下面没有线条*/
            border-bottom: none;
            position: relative;
            top:3px;
            background: white;

        }
        .box li{
            float: left;
            margin:11px;


        }
        .box .content{
            width:1000px;
            height: 475px;
            border:3px solid #ccc;

        }
        .content div{
            display: none;
        }
        .content img{
            width: 1000px;
            height: 475px;
        }
        .box li.cur{
            color:red;
            font-size: 18px;

        }
        .content .active{
            display: block;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="tab">
        <ul>
            <li class="cur">前端学院</li>
            <li>ios学院</li>
            <li>java学院</li>
            <li>UI精品学院</li>


        </ul>


    </div>
    <div class="content">

        <div class="active"><img src="images/01.png" alt=""></div>
        <div><img src="images/02.png" alt=""></div>
        <div><img src="images/03.png" alt=""></div>
        <div><img src="images/04.png" alt=""></div>

    </div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.当移动到对应的li上的时候,让对应的li的颜色以及字体发生改变以及设置下面图片切换*/
        $('li').mouseenter(function () {

            /*1.1让对应的li的颜色和字体发生变化*/
            /*1.11只需要给对应的li添加类它的兄弟节点移出类*/
            $(this).addClass('cur').siblings().removeClass('cur');

            /*1.2设置对应的图片显示*/
            /*1.21获取对应的索引值*/
            var index = $(this).index();
            /*1.22需要给对应的div添加对应的类它的兄弟节点移出类*/
            $('.content div').eq(index).addClass('active').siblings().removeClass('active');

        })
    })
</script>
</body>
</html>